<template>
    <el-dialog v-model="reNameFileVisible"
               class="custom-dialog"
               width="544px"
               :show-close='false'
               :close-on-click-modal="false"
               modal-class="dialog-center"
               :before-close="handleClose">
        <div class="custom-dialog-header">
            <div class="title-box">
                <div class="title">{{ $t('message.text.renameFile') }}</div>
            </div>
            <svg class="close-icon" @click="handleClose">
                <use xlink:href="#keowledge-danchuangguanbi1"></use>
            </svg>
        </div>
        <div class="custom-dialog-body">
            <el-form :model="folderForm" :rules="folderRules" size="large" ref="folderFormRef">
                <el-form-item prop="name">
                    <div class="custom-form-title"><span class="require">*</span>{{ $t('message.form.fileName') }}</div>
                    <el-input v-model="folderForm.name" :placeholder="$t('message.placeholder.pleaseFileNames')"/>
                    <!-- <div class="custom-form-tips">请不要输入 /、#，否则分享该文档将失效</div> -->
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="custom-dialog-footer">
                <el-button @click="handleClose">{{ $t('message.buttons.cancal') }}</el-button>
                <el-button type="primary" @click="handleSave">{{ $t('message.buttons.submit') }}</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {
    ref,
    onMounted,
    getCurrentInstance
} from 'vue'
import type {ComponentInternalInstance} from 'vue'
import type {FormRules} from 'element-plus'
import {setLibrary} from '@/api/common'
import {useHookI18n} from '@/hooks/i18n'

const {$t} = useHookI18n()

const emit = defineEmits(["changeFileName"])
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性

const folderForm = ref({
    name: ''
})
const reNameFileVisible = ref(false)
const folderRules = ref<FormRules>({
    name: [{
        validator: (_rule: any, value: any, callback: any) => {
            if (!value) {
                callback(new Error($t('message.placeholder.pleaseFileNames')))
            } else {
                let reg = /([:/?\*<>\&|\{}\!:\'$%\^])/g
                if (reg.test(value)) {
                    callback(new Error($t('message.placeholder.noInputCharacters')))
                } else {
                    callback()
                }
            }
        }
    }]
})
const folderFormRef = ref()
onMounted(() => {

})

function init(data: any) {
    folderForm.value = JSON.parse(JSON.stringify(data))
    reNameFileVisible.value = true
}

function handleClose() {
    folderForm.value = {
        name: '',
    }
    folderFormRef.value.resetFields()
    reNameFileVisible.value = false
}

function handleSave() {
    folderFormRef.value.validate((valid: any) => {
        if (valid) {
            if (folderForm.value.children) delete folderForm.value.children
            if (folderForm.value.label) delete folderForm.value.label
            if (folderForm.value.level) delete folderForm.value.level

            setLibrary({
                ...folderForm.value,
                filePath: null,
                bucketName: null
            }).then(res => {
                if (res.data.code == 0) {
                    proxy.$onePrompt.$oneNotify({
                        message: $t('message.message.renameCompleted'),
                        type: 'success',
                        position: 'bottom-right',
                        title: $t('message.prompt')
                    })
                    emit('changeFileName',
                        'valChange', {
                            id: res.data.data.id,
                            key: 'name',
                            changeVal: res.data.data.name
                        }
                    )
                    handleClose()
                }
            })
        }
    })
}

defineExpose({
    init
})
</script>
<style lang="scss" scoped>
.custom-dialog-body {
    padding: 24px 32px;

    .custom-form-tips {
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #6F7588;
    }
}
</style>
